<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--    引入css 样式-->
  <link rel="stylesheet"  href="/layui/css/layui.css">
  <!--    引入js -->
  <script src="/layui/layui.js"></script>
</head>
<body >
<div style="margin-top: 30px;margin-left: 20%;width: 60%">
    <form class="layui-form layui-form-pane" lay-filter="test1" action="">
<!--        隐藏域 存在，但是页面看不见 因为修改的时候，是通过id-->
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入主人名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>
            <div class="layui-input-block">
                <input type="text" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">家乡：</label>
            <div class="layui-input-block">
                <input type="text" name="home" required  lay-verify="required" placeholder="请输入家乡名称" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">修改用户</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script>
    //从本地存储获取对应的数据 localStorage.getItem 存储的数据是json的格式
    var obj=JSON.parse(localStorage.getItem("admin"))
    //Demo


    layui.use('form', function(){
        var form = layui.form,
            $=layui.$;
        //修改页面，需要为表单赋值
        form.val("test1",obj);
        //提交
        form.on('submit(formDemo)', function(data){

            //ajax
            // $.ajax
            // ({
            //     url: "/api/admin/update.do",
            //     dataType: "json",
            //     type: "post",
            //     data: {
            //         username:,
            //         key: "7486e10d3ca83a934438176cf941df0c",
            //     },
            //     success:function(res){
            //         alert(res.geocodes[0].formatted_address+"经纬度："+res.geocodes[0].location);
            //         console.log(res);  //在console中查看数据
            //     },
            //     error:function(){
            //         alert('failed!');
            //     },
            // });

            console.log(data.field);

            //请求新增接口 Ajax post
            $.post("/api/admin/update.do",data.field,function (res){
                console.log("修改 ==》"+res);
                //验证接口的返回 是否成功
                if(res.code==0){
                    layer.msg("亲，修改成功！");
                    location.href="listad.html";
                }else {
                    layer.msg(res.data);
                }
            });
            return false;
        });
    });
</script>
</body>
</html>